<!DOCTYPE html>
<html  lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>报表</title>
    <th:block th:include="~{common/common::commonHead}"/>
    <script th:src="@{/js/order/supplierOrderList.js}"></script>
    <!--Beyond Scripts-->
    <script src="../../lib/jquery-ui/js/beyond.min.js" th:src="@{/lib/jquery-ui/js/beyond.min.js}"></script>
    <!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
    <script src="../../lib/jquery-ui/js/skins.min.js" th:src="@{/lib/jquery-ui/js/skins.min.js}"></script>
</head>

<body>

        <div class="widget-body ">
            <div class="select-table">
                <div class="row ">
                    <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                        <div class="form-group">
                            <label class="control-label">选择时间</label>
                            <div class="input-group col-lg-8 col-md-8 col-sm-9 col-xs-12">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                                <input type="text" class="form-control" id="reservation" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row ">
                    <div class="panel-body col-md-12">
                        <div class="tab-content">
                            <div style="height:400px" class="active  tab-pane" id="sales-week"></div>
                            <div style="height:400px" class="active tab-pane" id="sales-month" ></div>
                            <div style="height:400px" class="active tab-pane" id="sales-year" ></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!-- Page index echarts  Style-->
<script src="../../js/echarts/dataTool.min.js" ></script>
<script src="../../js/echarts/echarts-all-3.js" ></script>
<script src="../../js/echarts/world.js" ></script>

<!--Bootstrap Date Range Picker-->
<script src="../../lib/jquery-ui/js/datetime/moment.js"></script>
<script src="../../lib/jquery-ui/js/datetime/daterangepicker.js"></script>
<script>
    //--Bootstrap Date Range Picker--
    $('#reservation').daterangepicker();
</script>
<script>

    //本周 柱状图表
    var dom = document.getElementById("sales-week");
    var myChart = echarts.init(dom);
    app ={ };
    option = {
        color: ['#3398DB'],
        title : {
            text: '本周销售额',
            subtext: '',
            x:'left'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'销售额',
                type:'bar',
                barWidth: '60%',
                data:[232, 200, 310, 120, 240, 301, 209],
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };
    // 月度 折线图表

    var dom = document.getElementById("sales-month");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        color: ['#3398DB'],
        title: {
            text: '本月销售额',
            itemGap: 0

        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['销售额'],
            x: 'center'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,

                data : ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18',
                    '19','20','21','22','23','24','25','26','27','28','29','30'],
            }
        ],
        yAxis : [
            {
                //                name : '单位：元',
                type : 'value',
                axisLabel : {
                    formatter: '{value} (元)'
                }
            }
        ],
        series : [
            {
                name:'销售额',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[232, 200, 310, 120, 240, 301, 209,232, 200, 310, 120, 240, 301, 209,232, 200, 310, 120, 240, 301, 209,232, 200, 310, 120, 240, 301, 209,256,298],
            },
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    };

    // 年度 饼形图表

    var dom = document.getElementById("sales-year");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        title : {
            text: '商品销售占比',
            subtext: '',
            x:'left'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            data: ['日用品','食品副食','饮料','其他']
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:234, name:'日用品'},
                    {value:31, name:'食品副食'},
                    {value:124, name:'饮料'},
                    {value:124, name:'其他'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
        window.onresize = myChart.resize;
    };

</script>

</body>
</html>
